<template>
  <div :class="['video-item',{borSelected:selected}]">
    <video controls autoplay="autoplay" muted controlslist="nodownload" @contextmenu.prevent="" class="h5-video"
           @click.prevent="">
      <source :src="mySrc" type="video/mp4">
      您的浏览器不支持Video标签。
    </video>
  </div>
</template>

<script>
export default {
  name: "GlVideo",
  props: {
    src: {//监控视频地址
      type: String,
      defaultValue: ''
    },
    selected: {//是否被选中
      type: Boolean,
      defaultValue: false
    }
  },
  computed: {
    mySrc() {
      if (typeof this.src === 'undefined' || this.src === null || this.src === '') {
        return 'https://training-exam-oss.oss-cn-huhehaote.aliyuncs.com/training-examination-system/training-examination/uploads/2021-07-23/162702429650229808.mp4'
      }
      return this.src
    }
  }
}
</script>

<style lang="less" scoped>
.video-item {
  display: flex;
  width: 100%;
  height: 100%;
  border: 2px solid #999999;
  box-sizing: border-box;

  .h5-video {
    display: flex;
    object-fit: fill;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  &.borSelected {
    border-color: red;
  }
}
</style>
